<template>
    <SearchForm v-if="CommonStore.showSearch" :FormValue="WhiteListStore.searchForm" :FormConfig />


    <!-- <a-input-group compact v-if="!CommonStore.showSearch" style="margin: 5px 0;" class="searchCard">
        <a-input allowClear style="width: 42%;" v-model:value="WhiteListStore.searchForm.groupName"
            placeholder="项目名称" />
        <a-input allowClear style="width: 42%;" v-model:value="WhiteListStore.searchForm.specimenName"
            placeholder="标本名称" />
        <a-button @click="WhiteListStore.getWhiteList">
            <template #icon>
                <SearchOutlined />
            </template>
</a-button>
<a-button type="primary" @click="addFormRef.open = true">
    <template #icon>
                <PlusOutlined />
            </template>
</a-button>
</a-input-group> -->

    <a-card>
        <a-spin :spinning="WhiteListStore.loading">
            <a-table bordered :scroll :columns :pagination="WhiteListStore.searchForm"
                :dataSource="WhiteListStore.tableData" @change="WhiteListStore.getWhiteList">
                <template #bodyCell="{ text, record, index, column }">
                    <template v-if="column.dataIndex === 'deviceNames'">
                        <Btn type="link" @click="LookDevice(record.deviceNames)">查看</Btn>

                    </template>
                    <template v-if="column.dataIndex === 'action'">
                        <a-popconfirm title="此操作不可逆，是否继续？" ok-text="确定" cancel-text="取消"
                            @confirm="WhiteListStore.delWhiteList(record)" @cancel="EventBus.emit('CancleInfo')">
                            <Btn type="link">删除</Btn>
                        </a-popconfirm>
                    </template>
                </template>
            </a-table>
        </a-spin>
    </a-card>

    <ModalForm type="add" ref="addFormRef" :okFn="WhiteListStore.addWhiteList" :FormValue="WhiteListStore.addForm"
        :FormConfig="addForm" :rules="addRules" />

</template>
<script lang='ts' setup>
import { SearchOutlined, PlusOutlined } from '@ant-design/icons-vue'
import { provide, ref, onUnmounted, inject, type Ref, h } from 'vue';
import { useWhiteList } from '@/stores/WhiteList'
import { searchConfig, addConfig, columns } from '@/config/WhiteList'
import { createForm } from '@/utils/CreateForm';
import { createBtns } from '@/utils/createPermissionBtns';

import { debounce } from 'lodash'
import EventBus from '@/utils/EventBus';
import { useTableScroll } from '@/utils/GetTableScroll';
import { useCommon } from '@/stores/Common';
import { Modal, List } from 'ant-design-vue';

const CommonStore = useCommon()


const { FormConfig } = new createForm(searchConfig, { labelAlign: 'right', layout: 'inline', labelCol: { span: 5 } },)
const { FormConfig: addForm, FormRules: addRules } = new createForm(addConfig)

const WhiteListStore = useWhiteList()

WhiteListStore.getWhiteList()

const scroll = useTableScroll('searchCard')
const addFormRef = ref()

const LookDevice = (deviceNames: string) => {
    Modal.info({
        title: '可控设备',
        maskClosable: true,
        content: h(
            List,
            { dataSource: deviceNames.split(','), pagination: false },
            {
                renderItem: ({ item, index }: { item: string, index: number }) =>
                    h(
                        List.Item,
                        {},
                        { default: () => `${index + 1}-${item}` }
                    )
            }
        )
    })
}


provide('permissionBtns', createBtns({
    query: debounce(() => { WhiteListStore.searchForm.pageNo = 1; WhiteListStore.getWhiteList() }, 1000),
    add: () => addFormRef.value.open = true,
}))


onUnmounted(() => {
    WhiteListStore.$reset()
})

</script>
<style lang='scss' scoped></style>